<template>
  <ul class="bw-js-extnd-params">
    <li class="bw-js-extnd-param-item bw-js-extnd-param-title">
      <span class="column-item"> 参数标识 </span>
      <span class="column-item"> 参数名称 </span>
      <span class="column-item"> 参数类型 </span>
      <span class="column-item"> 参数值来源 </span>
      <span class="column-item"> 参数值 </span>
      <span class="column-action"> 操作 </span>
    </li>

    <template v-if="curParamList.length">
      <li
        v-for="(item, index) in params"
        class="bw-js-extnd-param-item"
        :key="item.paramCode + '_' + index"
      >
        <a-input
          class="column-item"
          placeholder="请输入参数标识"
          v-model:value="curParamList[index].paramCode"
        />

        <a-input
          class="column-item"
          placeholder="请输入参数名称"
          v-model:value="curParamList[index].paramName"
        />

        <a-select
          class="column-item"
          :options="curParamDataTypes"
          placeholder="请选择参数类型"
          v-model:value="curParamList[index].paramDataType"
        />

        <a-select
          class="column-item"
          :options="curParamFromTypes"
          placeholder="请选择参数值来源"
          v-model:value="curParamList[index].paramFrom"
        />

        <BwParamValue
          class="column-item"
          :eventParams="eventParams"
          :info="curParamList[index]"
        />

        <span class="column-action" @click="onDelParam(index, item)">
          删除
        </span>
      </li>
    </template>

    <template v-else>
      <a-empty />
    </template>
  </ul>
</template>

<script lang="ts" setup>
import { ref, computed, watch, unref } from 'vue'

import BwParamValue from './value.vue'

import {
  BwCustomComNodeAttrJsExpParamDataTypeEnum as BwParamDataTypeEnum,
  BwCustomComNodeEventCallbackParamFromTypeEnum as BwParamFromTypeEnum,
  type BwCustomComEmitParmsModel,
  type BwCustomComNodeEventCallbackParamInfoModel,
} from '@bitwit/base-com-render'
interface BwJsExtndParamsProps {
  eventParams: Array<BwCustomComEmitParmsModel>
  params?: Array<BwCustomComNodeEventCallbackParamInfoModel>
}

const emit = defineEmits(['delete'])
const props = withDefaults(defineProps<BwJsExtndParamsProps>(), {})

const curParamList = ref<Array<BwCustomComNodeEventCallbackParamInfoModel>>([])
const curParamDataTypes = computed(() => {
  return [
    { label: '数组', value: BwParamDataTypeEnum.array },
    { label: '布尔', value: BwParamDataTypeEnum.boolean },
    { label: '数字', value: BwParamDataTypeEnum.number },
    { label: '对象', value: BwParamDataTypeEnum.object },
    { label: '字符', value: BwParamDataTypeEnum.string },
    { label: '函数', value: BwParamDataTypeEnum.function },
  ]
})
const curParamFromTypes = computed(() => {
  return [
    { label: '常量', value: BwParamFromTypeEnum.const },
    { label: '组件变量', value: BwParamFromTypeEnum.comVar },
    { label: '组件外放属性', value: BwParamFromTypeEnum.comProp },
    { label: '节点循环变量', value: BwParamFromTypeEnum.forVar },
    { label: '事件参数', value: BwParamFromTypeEnum.event },
    { label: '插槽变量', value: BwParamFromTypeEnum.slotVar },
  ]
})

const onDelParam = (
  index: number,
  data: BwCustomComNodeEventCallbackParamInfoModel
) => {
  const list = curParamList.value ?? []

  list.splice(index, 1)
  curParamList.value = list
  emit('delete', index, data)
}

defineExpose({
  getParamList() {
    return unref(curParamList)
  },
})

watch(
  () => props.params,
  (newVal) => {
    if (Array.isArray(newVal) && newVal.length) {
      newVal.forEach((item, index) => {
        const oldData = unref(curParamList)[index]
        curParamList.value[index] = Object.assign({}, item, oldData)
      })
    } else {
      curParamList.value = []
    }
  },
  { deep: true, immediate: true }
)
</script>

<style lang="less" scoped>
.bw-js-extnd-params {
  width: 100%;
  overflow: auto;
  min-height: 80px;
  max-height: 200px;
  border-radius: 5px;
  border: 1px solid #e8e8e8;

  .bw-js-extnd-param-title {
    height: 30px;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #e8e8e8;
    background-color: rgb(182, 182, 182);

    .column-item {
      text-indent: 8px;
    }

    .column-action {
      color: #000 !important;
    }
  }

  .bw-js-extnd-param-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    justify-content: flex-start;

    .column-item {
      flex: 1;
      margin: 0 4px;
    }

    .column-action {
      width: 60px;
      cursor: pointer;
      color: #ff4d4f;
    }
  }
}
</style>
